<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main" style="width: 800px;height: 600px;"></div>
    <script src="./lib/echarts.min.js"></script>
    <script>
        const dom = document.querySelector('#main');
        const myChart = echarts.init(dom);

        const friutArr = [
            {name:"榴莲" ,price:"25.9"},
            {name:"香蕉" ,price:"3.9"},
            {name:"苹果" ,price:"15.9"},
            {name:"梨" ,price:"6.8"},
            {name:"橙子" ,price:"10.9"}
        ]

        
            
        const option = {
                //标题
                title:{
                    text:"水果价格"},
                    //图例组件
                    legend:{
                        right:'5%',
                        data:['价格']
                    },
                    //绘制网格
                    grid:{
                        left:'20%',
                    },
                    //x轴
                    xAxis:{
                        data:friutArr.map(v=>v.name),
                    },
                    //y轴
                    yAxis:{
                        //分割线
                        splitLine:{
                            lineStyle:{
                                type:'dashed'
                        }
                    }
                },
                //提示框组件
                tooltip:{
                    //触发类型
                    trigger:'axis',
                },
                //系列列表
                series:[
                    {
                        name:'价格',
                        type:'bar',
                        data:friutArr.map(v=>v.price)
                    }
                ],
                //颜色
                color:['#006edd']

            }
        
        myChart.setOption(option)
       
    </script>
</body>

</html>